<template>
	<ul class="list" >
		<li class="item" 
		v-for="item of letters" 
		:key="item" 
		:ref="item"
		@touchstart="handleTouchStart"
		@touchmove="handleTouchMove"
		@touchend="handleTouchEnd"
		@click="handleletterClick"
		>{{item}}</li>
	</ul>

</template>

<script>
	export default{
		name:'CityAlphabet',
		props:{
			cities:Object
		},
		computed:{
			letters(){
				const letters=[]
				for(let i in this.cities){
					letters.push(i)
				}
				return letters

			}
		},
		data (){
			return {
				touchstatus:false,
				startY:'',
				timer:null
			}
		},
		updated (){
			this.startY = this.$refs['A'][0].offsetTop
		},
		methods:{
			handleletterClick(e){
				//向外触发事件
				this.$emit("change",e.target.innerText)
			},
			handleTouchStart(){
				this.touchstatus=true
			},
			handleTouchMove(e){
				if(this.touchstatus){
					//计算当前手指滑动的位置
					if(this.timer){
						clearTimeOut(this.timer)
					}
					this.timer = setTimeout(() => {
						const touchY = e.touches[0].clientY - 79
						const index = Math.floor((touchY-this.startY)/20)
						if(index >= 0 && index < this.letters.length){
							this.$emit("change",this.letters[index])
						}
					},16)
					
				}
			},
			handleTouchEnd(){
				this.touchstatus=false
			}
		}
	}

</script>

<style lang="stylus" scoped>
	@import '~styles/varible.styl'
	.list
		position:absolute
		top:1.58rem
		bottom:0
		right:0
		width:.4rem
		display:flex
		flex-direction:column
		justify-content:center
		.item
			line-height:.4rem
			text-align:center
			color:$bgColor

</style>